<template>

  <el-dialog
    title="修改头像"
    :visible="visible"
    :confirm-loading="confirmLoading"
    :width="800"
    :footer="null"
    @cancel="cancelHandel"
  >
    <el-row>
      <el-col :xs="24" :md="12" :style="{height: '350px'}">
        <vue-cropper
          ref="cropper"
          :img="options.img"
          :info="true"
          :auto-crop="options.autoCrop"
          :auto-crop-width="options.autoCropWidth"
          :auto-crop-height="options.autoCropHeight"
          :fixed-box="options.fixedBox"
          @realTime="realTime"
        />
      </el-col>
      <el-col :xs="24" :md="12" :style="{height: '350px'}">
        <div class="avatar-upload-preview">
          <img :src="previews.url" :style="previews.img">
        </div>
      </el-col>
    </el-row>
    <br>
    <el-row>
      <el-col :lg="2" :md="2">
        <el-upload name="file" :before-upload="beforeUpload" :show-upload-list="false">
          <el-button icon="upload">选择图片</el-button>
        </el-upload>
      </el-col>
      <el-col :lg="{span: 1, offset: 2}" :md="2">
        <el-button icon="plus" @click="changeScale(1)" />
      </el-col>
      <el-col :lg="{span: 1, offset: 1}" :md="2">
        <el-button icon="minus" @click="changeScale(-1)" />
      </el-col>
      <el-col :lg="{span: 1, offset: 1}" :md="2">
        <el-button icon="undo" @click="rotateLeft" />
      </el-col>
      <el-col :lg="{span: 1, offset: 1}" :md="2">
        <el-button icon="redo" @click="rotateRight" />
      </el-col>
      <el-col :lg="{span: 2, offset: 6}" :md="2">
        <el-button type="primary" @click="finish('blob')">保存</el-button>
      </el-col>
    </el-row>
  </el-dialog>

</template>
<script>
import { VueCropper } from 'vue-cropper'

export default {
  components: {
    VueCropper
  },
  data() {
    return {
      visible: false,
      id: null,
      confirmLoading: false,
      fileList: [],
      uploading: false,
      options: {
        img: '',
        autoCrop: true,
        autoCropWidth: 200,
        autoCropHeight: 200,
        fixedBox: true
      },
      previews: {}
    }
  },
  methods: {
    edit(id) {
      this.visible = true
      this.id = id
      /* 获取原始头像 */
    },
    close() {
      this.id = null
      this.visible = false
    },
    cancelHandel() {
      this.close()
    },
    changeScale(num) {
      num = num || 1
      this.$refs.cropper.changeScale(num)
    },
    rotateLeft() {
      this.$refs.cropper.rotateLeft()
    },
    rotateRight() {
      this.$refs.cropper.rotateRight()
    },
    beforeUpload(file) {
      const reader = new FileReader()
      // 把Array Buffer转化为blob 如果是base64不需要
      // 转化为base64
      reader.readAsDataURL(file)
      reader.onload = () => {
        this.options.img = reader.result
      }
      // 转化为blob
      // reader.readAsArrayBuffer(file)

      return false
    },

    // 上传图片（点击上传按钮）
    finish(type) {
      console.log('finish')
      const _this = this
      const formData = new FormData()
      // 输出

      this.$refs.cropper.getCropBlob((data) => {
        const img = window.URL.createObjectURL(data)
        this.model = true
        this.modelSrc = img
        formData.append('file', data, this.fileName)
        this.$http.post('https://www.mocky.io/v2/5cc8019d300000980a055e76', formData,
          { contentType: false, processData: false,
            headers: { 'Content-Type': 'application/x-www-form-urlencoded' }})
          .then((response) => {
            _this.$message.success('上传成功')
            _this.$emit('ok', response.url)
            _this.visible = false
          })
      })
    },
    okHandel() {
      const vm = this

      vm.confirmLoading = true
      setTimeout(() => {
        vm.confirmLoading = false
        vm.close()
        vm.$message.success('上传头像成功')
      }, 2000)
    },

    realTime(data) {
      this.previews = data
    }
  }
}
</script>

<style lang="scss" scoped>

  .avatar-upload-preview {
    position: absolute;
    top: 50%;
    transform: translate(50%, -50%);
    width: 180px;
    height: 180px;
    border-radius: 50%;
    box-shadow: 0 0 4px #ccc;
    overflow: hidden;

    img {
      width: 100%;
      height: 100%;
    }
  }
</style>
